<template>
    <div class="assy">
    	<div class="assy-rightTab">
    		<span :class="{ 'activeTab': isActiveTab1 , 'assy-rightTab-title': isActiveTab }" @click="changeTab('xxlb')">详细列表</span>
    		<span :class="{ 'activeTab': isActiveTab2 , 'assy-rightTab-title': isActiveTab }" @click="changeTab('zzt')">柱状图</span>
    	</div>
      <div class="assy-inner">
       	<div class="assy-item">
          <span :class="{ 'active': isActive1 ,'assy-item-title': isActive}" @click="switchTab('jgwx')">极高危险</span>                
        </div>
        <div class="assy-item">
          <span :class="{ 'active': isActive2 ,'assy-item-title': isActive }" @click="switchTab('gwx')">高危险</span>               
        </div>
        <div class="assy-item">
          <span :class="{ 'active': isActive3 ,'assy-item-title': isActive }" @click="switchTab('zwx')">中危险</span>               
        </div>
        <div class="assy-item">
          <span :class="{ 'active': isActive4 ,'assy-item-title': isActive }" @click="switchTab('dwx')">低危险</span>               
        </div>
        <div class="assy-item">
          <span :class="{ 'active': isActive5 ,'assy-item-title': isActive }" @click="switchTab('jdwx')">极低危险</span>               
        </div>
      </div>
      <!--<div class="assy-panel">
      	<div class="assy-panel-ranking">
      		<div class="ranking"><div class="ranking-province">北京市</div><div class="ranking-top1"></div></div>
      		<div class="ranking"><div class="ranking-province">天津市</div><div class="ranking-top2"></div></div>
      		<div class="ranking"><div class="ranking-province">河北省</div><div class="ranking-top3"></div></div>
      	</div>
      </div>-->
      <el-table :data="tableData" height="170" style="width: 100%" v-show="isShowTabel">
		    <el-table-column prop="province" label="省（直辖市）" width="150" align="center">
		    	<template #default="scope">
						<span class="fontColor1">{{scope.row.province}}</span>
					</template>
				</el-table-column>
		    <el-table-column prop="riskArea" label="危险区面积" width="150" align="center">
		    	<template #default="scope">
						<span class="fontColor">{{scope.row.riskArea}}</span>
					</template>
				</el-table-column>
		    <el-table-column prop="riskProportion" label="占比" align="center">
		    	<template #default="scope">
						<span class="fontColor">{{scope.row.riskProportion}}%</span>
					</template>
				</el-table-column>
		  </el-table>
		  <vue3-seamless-scroll v-show="!isShowTabel" :hover="true" :hover-stop="true" :list="arrList" :step="0" class="seamless-warp" :copyNum="0">
		    <SliderGroup :list="arrList" titlePosition="up" :titleStyle="{ height: '20px', lineHeight: '20px' }"
		      :valueStyle="{ width: 'auto' }" valuePosition="up" :disabled="true" itemMaring="0 auto" />
		  </vue3-seamless-scroll>
      <!--<div id="barEchartsRef" ref="echartsRef" class="echats-box" v-show="!isShowTabel"></div>-->
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import SliderGroup from '@/components/SliderGroup'
import { getRiskAreaAnalysis,getSeismicLandslide,getSandLiquefaction,getSoftEarth } from '@/api/geologicalDisaster.js';
const isActive = ref(true);
const isActiveTab = ref(true);
const isActiveTab1 = ref(true);
const isActiveTab2 = ref(false);
const isActive1 = ref(true);
const isActive2 = ref(false);
const isActive3 = ref(false);
const isActive4 = ref(false);
const isActive5 = ref(false);
const isShowTabel = ref(true);

const tableData = ref([]);
const arrList = ref([]);
const tableData_1 = ref([]);
const tableData_2 = ref([]);
const tableData_3 = ref([]);
const tableData_4 = ref([]);
const tableData_5 = ref([]);
const props = defineProps({
    statisticsData: {
        default: {},
        type: Object,
    },
    typeData: {
      default: {},
      type: Object,
    },
    provinceCode:{
      default: "",
      type: String,
    }
})
const { statisticsData,typeData,provinceCode } = toRefs(props)
watch(()=>props.statisticsData,()=>{
    statisticsData.value.reportNum = String(statisticsData.value.reportNum).padStart(6, '0')
    statisticsData.value.mapNum = String(statisticsData.value.mapNum).padStart(6, '0')
    statisticsData.value.keyLocationsNum = String(statisticsData.value.keyLocationsNum).padStart(6, '0')
}, { deep: true, immediate: true })

const getData = () => {
  //市级
	getRiskAreaAnalysis({code:"510000"}).then((res) => {
		//console.log(res.data)
		tableData.value = res.data["0"];
		tableData_1.value = res.data["0"];
		tableData_2.value = res.data["1"];
		tableData_3.value = res.data["2"];
		tableData_4.value = res.data["3"];
		tableData_5.value = res.data["4"];
    //createEcharts(tableData_1.value);
//  arrList.value = tableData_1.value.map(item => {
//    return {
//      title: item.province,
//      num: item.riskArea,
//      value: Number(item.riskProportion),
//      valueInfo: `${item.riskArea}（${item.riskProportion}%）`
//    }
//  })
//  console.log(arrList.value)
  });
}

const changeTab = (val) => {
	if(val == "xxlb"){
		isActiveTab1.value = true;
		isActiveTab2.value = false;
		isShowTabel.value = true;
		
	}else if(val == "zzt"){
		isActiveTab2.value = true;
		isActiveTab1.value = false;
		isShowTabel.value = false;
		if(isActive1.value == true){
			nextTick(() => {
				
				//createEcharts(tableData_1.value);
				arrList.value = tableData_1.value.map(item => {
		      return {
		        title: item.province,
		        num: item.riskArea,
		        value: Number(item.riskProportion),
		        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
		      }
		    })
			})
		}else if(isActive2.value == true){
			nextTick(() => {
				//createEcharts(tableData_2.value)
				arrList.value = tableData_2.value.map(item => {
		      return {
		        title: item.province,
		        num: item.riskArea,
		        value: Number(item.riskProportion),
		        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
		      }
		    })
			})
		}else if(isActive3.value == true){
			nextTick(() => {
				//createEcharts(tableData_3.value)
				arrList.value = tableData_3.value.map(item => {
		      return {
		        title: item.province,
		        num: item.riskArea,
		        value: Number(item.riskProportion),
		        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
		      }
		    })
			})
		}else if(isActive4.value == true){
			nextTick(() => {
				//createEcharts(tableData_4.value)
				arrList.value = tableData_4.value.map(item => {
		      return {
		        title: item.province,
		        num: item.riskArea,
		        value: Number(item.riskProportion),
		        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
		      }
		    })
			})
		}else if(isActive5.value == true){
			nextTick(() => {
				//createEcharts(tableData_5.value);
				arrList.value = tableData_5.value.map(item => {
		      return {
		        title: item.province,
		        num: item.riskArea,
		        value: Number(item.riskProportion),
		        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
		      }
		    })
			})
		}
		
	}
}
const switchTab = (val) => {
	if(val == "jgwx"){
		isActive1.value = true;
		isActive2.value = false;
		isActive3.value = false;
		isActive4.value = false;
		isActive5.value = false;
		tableData.value = tableData_1.value;
		nextTick(() => {
			//createEcharts(tableData_1.value);
			arrList.value = tableData_1.value.map(item => {
	      return {
	        title: item.province,
	        num: item.riskArea,
	        value: Number(item.riskProportion),
	        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
	      }
	    })
		})
	}else if(val == "gwx"){
		isActive1.value = false;
		isActive2.value = true;
		isActive3.value = false;
		isActive4.value = false;
		isActive5.value = false;
		tableData.value = tableData_2.value;
		nextTick(() => {
			//createEcharts(tableData_2.value);
			arrList.value = tableData_2.value.map(item => {
	      return {
	        title: item.province,
	        num: item.riskArea,
	        value: Number(item.riskProportion),
	        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
	      }
	    })
		})
	}else if(val == "zwx"){
		isActive1.value = false;
		isActive2.value = false;
		isActive3.value = true;
		isActive4.value = false;
		isActive5.value = false;
		tableData.value = tableData_3.value;
		nextTick(() => {
			//createEcharts(tableData_3.value);
			arrList.value = tableData_3.value.map(item => {
	      return {
	        title: item.province,
	        num: item.riskArea,
	        value: Number(item.riskProportion),
	        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
	      }
	    })
		})
	}else if(val == "dwx"){
		isActive1.value = false;
		isActive2.value = false;
		isActive3.value = false;
		isActive4.value = true;
		isActive5.value = false;
		tableData.value = tableData_4.value;
		nextTick(() => {
			//createEcharts(tableData_4.value);
			arrList.value = tableData_4.value.map(item => {
	      return {
	        title: item.province,
	        num: item.riskArea,
	        value: Number(item.riskProportion),
	        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
	      }
	    })
		})
	}else if(val == "jdwx"){
		isActive1.value = false;
		isActive2.value = false;
		isActive3.value = false;
		isActive4.value = false;
		isActive5.value = true;
		tableData.value = tableData_5.value;
		nextTick(() => {
			//createEcharts(tableData_5.value);
			arrList.value = tableData_5.value.map(item => {
	      return {
	        title: item.province,
	        num: item.riskArea,
	        value: Number(item.riskProportion),
	        valueInfo: `${item.riskArea}（${item.riskProportion}%）`
	      }
	    })
		})
	}

}
let myChart = null;
// 渲染图表
const createEcharts = (dataList) => {
	if (!myChart) {
		myChart = echarts.init(document.getElementById('barEchartsRef'));
	}
	// 数据
	let yAxisArr = dataList.map(item=>{return item.province})
	let dataArr = dataList.map(item=>{return item.riskArea})
	let dataAxis = yAxisArr.reverse();
	let data = dataArr.reverse();
	// 配置项
	const option = {
		title: {
			show: false
		},
		xAxis: {
			type: 'value',
			position: 'top',
			// 不显示线条和刻度
			splitLine: {
				show: false,
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false,
			},
		},
		yAxis: {
			type: 'category',
			data: dataAxis,
			// 不显示线条和刻度
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
//				inside: false,
//				fontSize: 16,
//				color: '#FFFFFF',
				show: false				 
			},
			splitLine: {
				show: false,
			}
		},
		grid: {
			show: false,
			left: '2%',
			right: '0',
			top: 10,
			bottom: 10,
		},
		tooltip: {
			show: true,
			formatter: '{b0}: {c0}'
		},
		series: [
			{
				type: 'bar',
				barWidth: '10',
				showBackground: true,
				backgroundStyle: {
					borderRadius: [5, 5, 5, 5], //（顺时针左上，右上，右下，左下）
				},
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#0775FE' },
						{ offset: 1, color: '#46FFFF' }
					]),
					barBorderRadius: [5, 5, 5, 5], //（顺时针左上，右上，右下，左下）
					// shadowColor: '#0775FE',
					// shadowBlur: 2,
				},
				label: {
					show: true,
					fontSize: 16,
					color: '#FFFFFF',
					formatter: '{b}                                                     {c}',
					position: 'left',
					align: 'left',
					offset: [10, -20],
				 	rich: {
					 	bValue: {
              color: '#FFFFFF',
//            height: 24,
//            padding: [0, 5, 0, 5],
//            align: 'right'
            },
				 	}
				},
				data: data
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

//查询地震滑坡分析评估结果大屏任务按市统计面积及占比
const getSeismicLandslideByType = (childType) => {
  //type 统计方式：0省 1市
  //dzIntensity 地震烈度6-11
  let type = "1";
  let dzIntensity = 5 + childType;//6-11
  let code = props.provinceCode.substring(0,2);
  getSeismicLandslide(type,dzIntensity,code).then((res) => {
    console.log(res.data)
    let list = res.data;
    let list0 = [];//
    let list1 = [];
    let list2 = [];
    let list3 = [];
    let list4 = [];
    for(let i=0;i<list.length;i++){
      let obj = list[i];
      let riskGrade = obj.gridvalue;//危险分级值：1-5
      let province = obj.name;
      let riskArea = obj.area?obj.area.toFixed(0):0;
      let riskProportion = obj.percent?obj.percent.toFixed(2):0;
      let newObj = {
        province:province,
        riskArea:riskArea,
        riskProportion:riskProportion,
        riskGrade:riskGrade
      }
      if(riskGrade==1){
        list0.push(newObj);
      }else if(riskGrade==2){
        list1.push(newObj);
      }else if(riskGrade==3){
        list2.push(newObj);
      }else if(riskGrade==4){
        list3.push(newObj);
      }else if(riskGrade==5){
        list4.push(newObj);
      }
    }

    tableData.value = list0;
    tableData_1.value = list0;
    tableData_2.value = list1;
    tableData_3.value = list2;
    tableData_4.value = list3;
    tableData_5.value = list4;
    if(isActiveTab1.value){
      changeTab('xxlb');
    }
    if(isActiveTab2.value){
      changeTab('zzt');
    }
  });
}

//查询砂土液化分析评估结果大屏任务按市统计面积及占比
const getSandLiquefactionByType = (childType) => {
  //type 统计方式：0省 1市
  //dzIntensity 场地类别：0:活动构造区，1:稳定大陆区
  let type = "1";
  let dzIntensity = childType - 1;//0-1
  let code = props.provinceCode.substring(0,2);
  getSandLiquefaction(type,dzIntensity,code).then((res) => {
    console.log(res.data)
    let list = res.data;
    let list0 = [];//
    let list1 = [];
    let list2 = [];
    let list3 = [];
    let list4 = [];
    for(let i=0;i<list.length;i++){
      let obj = list[i];
      let riskGrade = obj.gridvalue;//危险分级值：1-5
      let province = obj.name;
      let riskArea = obj.area?obj.area.toFixed(0):0;
      let riskProportion = obj.percent?obj.percent.toFixed(2):0;
      let newObj = {
        province:province,
        riskArea:riskArea,
        riskProportion:riskProportion,
        riskGrade:riskGrade
      }
      if(riskGrade==1){
        list0.push(newObj);
      }else if(riskGrade==2){
        list1.push(newObj);
      }else if(riskGrade==3){
        list2.push(newObj);
      }else if(riskGrade==4){
        list3.push(newObj);
      }else if(riskGrade==5){
        list4.push(newObj);
      }
    }

    tableData.value = list0;
    tableData_1.value = list0;
    tableData_2.value = list1;
    tableData_3.value = list2;
    tableData_4.value = list3;
    tableData_5.value = list4;
    if(isActiveTab1.value){
      changeTab('xxlb');
    }
    if(isActiveTab2.value){
      changeTab('zzt');
    }
  });
}

//查询软土震陷分析评估结果大屏任务按市统计面积及占比
const getSoftEarthByType = (childType) => {
  //type 统计方式：0省 1市
  //dzIntensity 烈度7-9
  let type = "1";
  let dzIntensity = 6 + childType;//7-9
  let code = props.provinceCode.substring(0,2);
  getSoftEarth(type,dzIntensity,code).then((res) => {
    console.log(res.data)
    let list = res.data;
    let list0 = [];//
    let list1 = [];
    let list2 = [];
    let list3 = [];
    let list4 = [];
    for(let i=0;i<list.length;i++){
      let obj = list[i];
      let riskGrade = obj.gridvalue;//危险分级值：1-5
      let province = obj.name;
      let riskArea = obj.area?obj.area.toFixed(0):0;
      let riskProportion = obj.percent?obj.percent.toFixed(2):0;
      let newObj = {
        province:province,
        riskArea:riskArea,
        riskProportion:riskProportion,
        riskGrade:riskGrade
      }
      if(riskGrade==1){
        list0.push(newObj);
      }else if(riskGrade==2){
        list1.push(newObj);
      }else if(riskGrade==3){
        list2.push(newObj);
      }else if(riskGrade==4){
        list3.push(newObj);
      }else if(riskGrade==5){
        list4.push(newObj);
      }
    }

    tableData.value = list0;
    tableData_1.value = list0;
    tableData_2.value = list1;
    tableData_3.value = list2;
    tableData_4.value = list3;
    tableData_5.value = list4;
    if(isActiveTab1.value){
      changeTab('xxlb');
    }
    if(isActiveTab2.value){
      changeTab('zzt');
    }
  });
}

watch(()=>props.typeData,()=> {
  console.log(typeData.value)
  if(typeData.value.parentType == 1){
    //查询地震滑坡大屏任务按市统计面积及占比
    getSeismicLandslideByType(typeData.value.childType);
  }else if(typeData.value.parentType == 2){
    //查询砂土液化大屏任务按市统计面积及占比
    getSandLiquefactionByType(typeData.value.childType);
  }else if(typeData.value.parentType == 3){
    //查询软土震陷大屏任务按市统计面积及占比
    getSoftEarthByType(typeData.value.childType);
  }/*else{//清空数据
    tableData.value = [];
    tableData_1.value = [];
    tableData_2.value = [];
    tableData_3.value = [];
    tableData_4.value = [];
    tableData_5.value = [];
    if(isActiveTab1.value){
      changeTab('xxlb');
    }
    if(isActiveTab2.value){
      changeTab('zzt');
    }
  }*/
});

// 挂载完成
onMounted(() => {
	// 渲染图表
	//createEcharts();
  // getData();//测试数据
})
</script>
<style lang='scss' scoped>
.assy{
	width: 430px;
  height: 208px !important;
  overflow: hidden;
  margin: -30px auto 0;
    color: #fff;
    position: static!important;
    .assy-rightTab {
     	position: absolute;
     	top: 35px;
     	right: 15px;
     	z-index: 9999;
     	.activeTab {
	     	font-size: 14px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #46FFFF;	
				text-decoration-line: underline;
			  text-decoration-skip-ink: none;
			  text-underline-position: under;
				padding-bottom: 4px; /* 调整下划线距离字体的距离 */		
     	}
     	&-title{
				font-size: 14px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #418DFD;
				cursor: pointer;
				&:nth-child(2){
        	margin-left: 10px;
          
        }
			}
    }
    .assy-inner{
        display: flex;
        flex-wrap: wrap;
        /*justify-content: center;*/
    }
    &-item{
        width: 80px;
				height: 30px;
        margin-bottom: 10px;
        background: rgba(17,104,248,0.5);
				border-radius: 8px 8px 0px 0px;
        cursor: pointer;
        line-height: 29px;
        border: 1px solid #475ADB;
        text-align: center;
        &:nth-child(n){
        	margin-left: 5px;
          
        }
        span{
            display: block;
            color: #418DFD;
        }
        .active{        	
					color: #FFFFFF;
					background: #0775FE;
					border-radius: 8px 8px 0px 0px;
        }
        &-title{
          font-size: 14px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
        }
    }
   	:deep(.el-table) {
    	background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
    	
			opacity: 0.85;
		}
		:deep(.el-table th.el-table__cell){
			font-size: 16px;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #E6F4FD;
			background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
			border-bottom: 1px solid #475ADB;
		}
		:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
	    background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%)!important;
		}
		.fontColor1{
			font-size: 16px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #E6F4FD;
		}
		.fontColor{
			font-size: 16px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #46FFFF;
		}
    .echats-box {
			width: 430px;
			height: 150px;
			margin-top: 10px;
		}
    .assy-panel{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;

        &-ranking{
        	position: absolute;
        	top: 10px;
        	.ranking{
        		margin-bottom: 12px;
        		&-province{
        			font-size: 16px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
							margin-left:10px;
							margin-bottom:5px;
        		}
        		&-top1{
        			margin-left: 10px;
        			width: 276px;
							height: 10px;
							background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
							border-radius: 5px 5px 5px 5px;
        		}
        		&-top2{
        			margin-left: 10px;
        			width: 262px;
							height: 10px;
							background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
							border-radius: 5px 5px 5px 5px;
        		}
        		&-top3{
        			margin-left: 10px;
        			width: 215px;
							height: 10px;
							background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
							border-radius: 5px 5px 5px 5px;
        		}
        	}
        	
        }
    }
}
.seamless-warp {
	margin-top: 5px;
  height: calc(100% - 50px);
  overflow-y: auto;

  :deep(.slider-group-item) {

    .el-slider {
      width: 100%;
      margin: 0;

      .el-slider__runway {
        height: 10px;
        background: #000000;
				border:none;
        .el-slider__bar {
          height: 10px;
					background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
					border-radius: 5px 5px 5px 5px;
          background-position: center;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 0;
          margin-right: 0;
        }

        .el-slider__button-wrapper {
          color: red;
          margin-left: -13px;

          .el-slider__button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-position: center;
            width: 13px;
						height: 13px;
						background: #E9FFFF;
						box-shadow: 0px 0px 14px 1px #46FFFF;
						border-radius: 13px;
						border: 2px solid #46FFFF;
          }
        }
      }
    }
  }
}
</style>